<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>揽收计费模板</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <div style="display: flex;align-items: center;margin-bottom: 20px">
            <div style="width: 120px;">模板名称</div><el-input v-model="tempName" placeholder="请输入内容"></el-input>
        </div>
        <div class="tabs">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed label="配送区域" header-align="center" align="center">
                    <template v-slot:default="scope">
                        <div>{{scope.row.district.join('、')}}
                            <el-button type="text" @click="changeDistrict(scope)" >选择</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="重量范围" width="200">
                    <template v-slot:default="scope">
                        <el-input style="width: 50px" size="mini" v-model="scope.row.weigthRange[0]"></el-input> 到
                        <el-input style="width: 50px" size="mini" v-model="scope.row.weigthRange[1]"></el-input>（含）
                    </template>
                </el-table-column>
                <el-table-column label="首重" width="120">
                    <template v-slot:default="scope">
                        <el-input style="width: 50px" size="mini" v-model="scope.row.firstWeight"></el-input>（含）
                    </template>
                </el-table-column>
                <el-table-column label="首重费用" width="120">
                    <template v-slot:default="scope">
                        <el-input style="width: 50px" size="mini" v-model="scope.row.firstWeightFee"></el-input>（含）
                    </template>
                </el-table-column>
                <el-table-column label="续重" width="120">
                    <template v-slot:default="scope">
                        <el-input style="width: 50px" size="mini" v-model="scope.row.continousWeight"></el-input>（含）
                    </template>
                </el-table-column>
                <el-table-column label="续重费用" width="120">
                    <template v-slot:default="scope">
                        <el-input style="width: 50px" size="mini" v-model="scope.row.continousWeightFee"></el-input>（含）
                    </template>
                </el-table-column>

                <el-table-column label="浮动费用" width="120">
                        <template v-slot:default="scope">
                            <el-input style="width: 50px" size="mini" v-model="scope.row.reserveFee"></el-input>（含）
                        </template>
                    </el-table-column>

                <el-table-column fixed="right" label="操作" width="120" header-align="center" align="center">
                    <template v-slot:default="scope">

                        <!-- <el-button @click="saveLine(scope.row)" type="text" size="small">保存</el-button> -->
                        <el-button @click="del(scope.$index)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-button type="text" class="add" @click="addNew" style="margin-top: 20px">+添加新规则</el-button>
        <div style="margin-top: 100px;text-align: center;">
                <el-button type="primary" @click="save">保存</el-button>
        </div>
        <el-dialog title="选择地区" :visible.sync="dialogVisible" width="60%">
            <el-checkbox-group v-model="checkedList">
                <el-checkbox v-for="item in checkboxItems" :label="item.name" :checked="item.checked" :disabled="item.disabled"></el-checkbox>
            </el-checkbox-group>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="selectSure">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script>
var app = new Vue({
  el: '#app',
  data() {
    return {
        dialogVisible: false,
        tempName: '',
        provinces: ['北京','上海','广州','深圳','杭州'],
        checkboxItems: [],
        checkedList: [],
        checkedRow: 0,
        tableData: [{
            district: [],
            weigthRange: [0,5],
            firstWeight: 2,
            firstWeightFee: 5,
            continousWeight: 4,
            continousWeightFee: 5,
            reserveFee: 9
        }]
    }
  },
  created() {
    alert('2q334')
    this.checkboxItems = this.provinces.map(item => {
        return {
            name: item,
            checked: false,
            disabled: false
        }
    })
  },
  methods: {
    changeDistrict(scope) {
        let index = scope.$index
        this.checkedRow = index
        let thisDistrict = this.tableData[index]['district']
        this.checkboxItems.forEach(item => {
            if(item.checked && !thisDistrict.includes(item.name)) {
                item.disabled = true
            }
        })
        // this.checkedList = []
        this.dialogVisible = true;
    },
    saveLine(row) {
        console.log(row)
    },
    del(index) {
        this.tableData.splice(index,1)
        this.checkboxItems.forEach(item => {
            if(this.tableData[index].district.includes(item.name)) {
                item.checked = false
                item.disabled = false
            }
        })
    },
    addNew() {
        this.tableData = [...this.tableData,{
            district: [],
            weigthRange: [0,1],
            firstWeight: 1,
            firstWeightFee: 5,
            continousWeight: 1,
            continousWeightFee: 5,
            reserveFee: 6
        }]
    },
    save(){
        alert('1')
    },
    selectSure() {
        this.checkboxItems.forEach(item => {
            if(this.checkedList.includes(item.name)) {
                item.checked = true
            }else if(!item.disabled){
                item.checked = false
            }
        })
        let checkedList = this.checkboxItems.filter(item => item.checked && !item.disabled)
        this.tableData[this.checkedRow].district = checkedList.map(item => item.name)
        this.dialogVisible = false
    }
  },
})
</script>
</html>